<template>
    <div class="View">
        <!-- tab切换菜单 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" class="bh-tab">
            <el-tab-pane label="装置登録" name="1"></el-tab-pane>
            <el-tab-pane label="処理系登録" name="2"></el-tab-pane>
            <el-tab-pane label="プロットプラン登録" name="3"></el-tab-pane>
            <el-tab-pane label="PFD関連付け" name="4"></el-tab-pane>
            <el-tab-pane label="プロットプラン関連付け" name="5"></el-tab-pane>
        </el-tabs>

        <!-- 内容区域 -->
        <div class="container" :style="{ height: activeName == 5 ? '100%' : 'calc(100% - 55px)' }">
            <div class="SecondaryMenu" v-if="activeName != 4">
                <div class="nameOne" v-if="activeName == 1">
                    <div>
                        <el-button type="primary" size="mini" @click="showTab1DelFlgFn">
                            機器・配管の一括削除
                        </el-button>
                    </div>
                    <div>
                        <el-button style="width: 33px !important;" size="mini" @click="SetDataSortFn('top')">
                            <i style="transform: translateX(-6px);" class="el-icon-caret-top"></i>
                        </el-button>
                        <el-button style="width: 33px !important;" size="mini" @click="SetDataSortFn('bottom')">
                            <i style="transform: translateX(-6px);" class="el-icon-caret-bottom"></i>
                        </el-button>
                        <el-button size="mini" @click="addRowFn()"
                            :style="{ background: addBtnFlg ? 'rgb(188, 0, 15)' : '', color: addBtnFlg ? '#FFF' : '' }">
                            追加
                        </el-button>
                        <el-button size="mini" @click="delFn" :disabled="addBtnFlg || delBtnFlg">
                            削除
                        </el-button>
                    </div>
                </div>
                <div class="nameOne" v-if="activeName == 2">
                    <div>
                        <el-button type="primary" style="width: 100px;" size="mini"
                            @click="showTypeBy2 = showTypeBy2 == 1 ? 2 : 1">
                            {{ showTypeBy2 == 1 ? 'リスト' : '図面' }}
                        </el-button>
                        <span class="ml12">装置：</span>
                        <!-- <el-select v-model="showTypeBy2" placeholder=" " size="mini">
                            <el-option v-for="item in 3" :key="item" :label="item" :value="item">
                            </el-option>
                        </el-select> -->
                        <el-select v-model="valuePlant" placeholder=" " size="mini" @change="PlantChange()"
                            @focus="getPlantApi(1, 1000)">
                            <el-option v-for=" item in plantOptions " :key="item.pltCode" :label="item.pltName"
                                :value="item.pltCode"></el-option>
                        </el-select>
                        <el-button size="mini" class="ml12" @click="isShowTab2ListFlg = true">
                            フォルダーを開く
                        </el-button>
                        <el-button size="mini" @click="isShowTab2UpFlg = true">
                            アップロード
                        </el-button>
                        <el-button size="mini" @click="delTableRowFn" :disabled="rowBtnFlg">
                            削除
                        </el-button>
                    </div>
                    <div>
                        <el-button size="mini" @click="SetDataSortFn('top')">
                            <i class="el-icon-caret-top"></i>
                        </el-button>
                        <el-button size="mini" @click="SetDataSortFn('bottom')">
                            <i class="el-icon-caret-bottom"></i>
                        </el-button>
                        <el-button size="mini" @click="addRowFn()"
                            :style="{ background: addBtnFlg ? 'rgb(188, 0, 15)' : '', color: addBtnFlg ? '#FFF' : '' }">
                            追加
                        </el-button>
                        <el-button size="mini" @click="delFn" :disabled="addBtnFlg || delBtnFlg">
                            削除
                        </el-button>
                    </div>
                </div>
                <div class="nameOne" v-if="activeName == 3">
                    <div>
                        <el-button type="primary" style="width: 100px;" size="mini"
                            @click="showTypeBy3 = showTypeBy3 == 1 ? 2 : 1">
                            {{ showTypeBy3 == 1 ? 'リスト' : '図面' }}
                        </el-button>

                        <el-button size="mini" @click="isShowTab3ListFlg = true">
                            フォルダーを開く
                        </el-button>
                        <el-button size="mini" @click="isShowTab3UpFlg = true">
                            アップロード
                        </el-button>
                        <el-button size="mini" @click="delTableRowFn" :disabled="rowBtnFlg">
                            削除
                        </el-button>
                    </div>
                    <div>
                        <el-button size="mini" @click="SetDataSortFn('top')">
                            <i class="el-icon-caret-top"></i>
                        </el-button>
                        <el-button size="mini" @click="SetDataSortFn('bottom')">
                            <i class="el-icon-caret-bottom"></i>
                        </el-button>
                        <el-button size="mini" @click="addRowFn()"
                            :style="{ background: addBtnFlg ? 'rgb(188, 0, 15)' : '', color: addBtnFlg ? '#FFF' : '' }">
                            追加
                        </el-button>
                        <el-button size="mini" @click="delFn" :disabled="addBtnFlg || delBtnFlg">
                            削除
                        </el-button>
                    </div>
                </div>

                <div class="nameOne4" v-if="false">
                    444
                    <!-- <iframe :src="iframeSrc" width="100%" height="500px"></iframe> -->
                </div>
                <div class="nameOne" v-if="activeName == 5">
                    <div>
                        <!-- <span>印刷</span>
                        <span>閲覧</span>
                        <span>データ</span>
                        <span>表示</span> -->
                    </div>
                    <div>
                        <el-button type="primary" size="mini" @click="onEditClick">
                            マークアップ
                        </el-button>
                    </div>
                </div>
            </div>

            <div class="containerView"
                :style="{ border: activeName == 5 ? 'none' : '1px', height: activeName == 4 ? 'calc(100%)' : '' }">
                <Tab1 ref="Tab1" v-if="activeName == 1" @changeBtnFlgFn="changeBtnFlgFn"
                    @changeBtnFlgFn1="changeBtnFlgFn1" @changeBtnFlgFn2="changeBtnFlgFn2"></Tab1>
                <DialogTab1Del v-if="activeName == 1 && showTab1DelFlg" @showTab1DelFlgFn="showTab1DelFlgFn"
                    :PltCode="PltCode" @reGetFn="reGetFn">
                </DialogTab1Del>

                <Tab2 ref="Tab2" v-if="activeName == 2" :showTypeBy2="showTypeBy2" @changeBtnFlgFn="changeBtnFlgFn"
                    @changeBtnFlgFn1="changeBtnFlgFn1" @changeBtnFlgFn2="changeBtnFlgFn2"></Tab2>
                <tabFiveTabelShow v-if="isShowTab2ListFlg" type="device" title="処理系登録"
                    @close="isShowTab2ListFlg = false" @getResponse="getResponse">
                </tabFiveTabelShow>
                <ImportDialogForPic v-if="isShowTab2UpFlg" :_api="api" @close="isShowTab2UpFlg = false" title="処理系登録"
                    @getResponse="getResponse" :type="4">
                </ImportDialogForPic>

                <Tab3 ref="Tab3" v-if="activeName == 3" :showTypeBy3="showTypeBy3" @changeBtnFlgFn="changeBtnFlgFn"
                    @changeBtnFlgFn1="changeBtnFlgFn1" @changeBtnFlgFn2="changeBtnFlgFn2"></Tab3>
                <tabFiveTabelShow v-if="isShowTab3ListFlg" type="device" title="プロットプラン登録"
                    @close="isShowTab3ListFlg = false" @getResponse="getResponse">
                </tabFiveTabelShow>
                <ImportDialogForPic v-if="isShowTab3UpFlg" :_api="api" @close="isShowTab3UpFlg = false"
                    title="プロットプラン登録" @getResponse="getResponse" :type="4">
                </ImportDialogForPic>

                <Tab4 v-if="activeName == 4"></Tab4>

                <Tab5 ref="Tab5" v-if="activeName == 5"></Tab5>

            </div>

            <div class="bottonBtn" v-if="activeName != 5 && activeName != 4">
                <el-button size="mini" @click="reGetFn">
                    Cancel
                </el-button>
                <el-button type="primary" size="mini" @click="saveFn">
                    編集内容を保存
                </el-button>
            </div>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import Tab1 from "./Tab1/Table.vue";
import DialogTab1Del from "./Tab1/DialogTab1Del.vue";
import Tab2 from "./Tab2/Table.vue";
import Tab3 from "./Tab3/Table.vue";

import Tab4 from "@/views/EditRelationPageForTab4.vue";

import Tab5 from "./Tab5/Table.vue";
import tabFiveTabelShow from '@/components/TabelLineCadViews/BSDetailConmpontents/tabFiveTabelShow.vue'
import ImportDialogForPic from '@/components/Excel/ImportDialog/ImportDialogForPic.vue';
import {
    getSavePlantRegTipsMsg, getDelPlantRegTipsMsg, getPlant,
    getDelProcessTipsMsg, getDelDrwPlanTipsMsg, setPlantManageDataSort,
    getDelFileRelaTipsMsg, getDelProcessFileTipsMsg
} from "@/api/api";
import { showLoading, hideLoading } from "@/utils/loading";
export default {
    name: "DeviceLoginIndex",
    data() {
        return {
            iframeSrc: "http://localhost:9099/#/editRelation",
            // 一级导航切换
            activeName: "1",

            // Tab1中，一括削除弹框是否显示
            showTab1DelFlg: false,

            // Tab2-3中，底部图形是否显示1不显示2显示
            showTypeBy2: 1,
            showTypeBy3: 1,

            // Tab2-3中，l列表弹框
            isShowTab2ListFlg: false,
            isShowTab3ListFlg: false,
            // Tab2-3中，上传弹框
            isShowTab2UpFlg: false,
            isShowTab3UpFlg: false,
            title: 'test',
            api: '/api/PlantManage/upLoadPfdAssFile',

            plantOptions: [],
            valuePlant: Number(this.$store.state.pltCode),
            rowBtnFlg: false,
            delBtnFlg: false,
            addBtnFlg: false,
        };
    },
    components: {
        Tab1, Tab2, Tab3, Tab4, Tab5, DialogTab1Del, tabFiveTabelShow, ImportDialogForPic
    },
    watch: {
        activeName: {
            immediate: true,
            deep: true,
            handler(nVal) {
                // this.initFn(nVal)
                if (this.activeName == 2) {
                    this.getPlantApi(1, 999)
                }
                this.showTypeBy2 = 1;
                this.showTypeBy3 = 1;
            },
        },
    },
    computed: {
        PltCode() {
            return this.$refs.Tab1.activeRow.pltCode
        },
    },
    methods: {
        changeBtnFlgFn(flg) {
            this.addBtnFlg = flg;
        },
        changeBtnFlgFn1(flg) {
            this.delBtnFlg = flg;
        },
        changeBtnFlgFn2(flg) {
            console.log(flg);
            this.rowBtnFlg = flg;
        },

        handleClick(tab, event) {
            console.log('activeName', this.activeName);
        },


        async delTableRowFn() {
            let dataJson = {
                FileName: "",
            };
            if (this.activeName == 1) {

            }
            if (this.activeName == 2) {
                dataJson.FileName = this.$refs.Tab2.activeRow.proPass;
            }
            if (this.activeName == 3) {
                dataJson.FileName = this.$refs.Tab3.activeRow.areaFile;
            }
            let res = await getDelProcessFileTipsMsg(dataJson);
            if (res.data.code == 451) {
                this.$confirm(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    if (this.activeName == 1) {

                    }
                    if (this.activeName == 2) {
                        this.$refs.Tab2.delRowFileFn();
                    }
                    if (this.activeName == 3) {
                        this.$refs.Tab3.delRowFileFn();
                    }
                }).catch(() => {

                });
            }
        },
        async SetDataSortFn(type) {
            showLoading();
            let dataJson = {
                Type: Number(this.activeName),
                FromId: 'xxx',
                ToId: 'xxx',
            };
            if (this.activeName == 1) {
                if (type == 'top' && this.$refs.Tab1.activeIndex == 0) {
                    return
                }
                if (type == 'bottom' && this.$refs.Tab1.activeIndex == this.$refs.Tab1.tableData.length - 1) {
                    return
                }
                if (type == 'top') {
                    dataJson.FromId = Number(this.$refs.Tab1.tableData[this.$refs.Tab1.activeIndex].pltCode);
                    dataJson.ToId = Number(this.$refs.Tab1.tableData[this.$refs.Tab1.activeIndex - 1].pltCode);
                    this.$refs.Tab1.activeIndex--;
                }
                if (type == 'bottom') {
                    dataJson.FromId = Number(this.$refs.Tab1.tableData[this.$refs.Tab1.activeIndex].pltCode);
                    dataJson.ToId = Number(this.$refs.Tab1.tableData[this.$refs.Tab1.activeIndex + 1].pltCode);
                    this.$refs.Tab1.activeIndex++;
                }
            }
            if (this.activeName == 2) {
                if (type == 'top' && this.$refs.Tab2.activeIndex == 0) {
                    return
                }
                if (type == 'bottom' && this.$refs.Tab2.activeIndex == this.$refs.Tab2.tableData.length - 1) {
                    return
                }
                if (type == 'top') {
                    dataJson.FromId = Number(this.$refs.Tab2.tableData[this.$refs.Tab2.activeIndex].proCode);
                    dataJson.ToId = Number(this.$refs.Tab2.tableData[this.$refs.Tab2.activeIndex - 1].proCode);
                    this.$refs.Tab2.activeIndex--;
                }
                if (type == 'bottom') {
                    dataJson.FromId = Number(this.$refs.Tab2.tableData[this.$refs.Tab2.activeIndex].proCode);
                    dataJson.ToId = Number(this.$refs.Tab2.tableData[this.$refs.Tab2.activeIndex + 1].proCode);
                    this.$refs.Tab2.activeIndex++;
                }
            }
            if (this.activeName == 3) {
                if (type == 'top' && this.$refs.Tab3.activeIndex == 0) {
                    return
                }
                if (type == 'bottom' && this.$refs.Tab3.activeIndex == this.$refs.Tab3.tableData.length - 1) {
                    return
                }
                if (type == 'top') {
                    dataJson.FromId = Number(this.$refs.Tab3.tableData[this.$refs.Tab3.activeIndex].areaCode);
                    dataJson.ToId = Number(this.$refs.Tab3.tableData[this.$refs.Tab3.activeIndex - 1].areaCode);
                    this.$refs.Tab3.activeIndex--;
                }
                if (type == 'bottom') {
                    dataJson.FromId = Number(this.$refs.Tab3.tableData[this.$refs.Tab3.activeIndex].areaCode);
                    dataJson.ToId = Number(this.$refs.Tab3.tableData[this.$refs.Tab3.activeIndex + 1].areaCode);
                    this.$refs.Tab3.activeIndex++;
                }
            }
            let res = await setPlantManageDataSort(dataJson);

            this.reGetFn();
            setTimeout(() => {
                hideLoading();
            }, 300);
        },

        async saveFn() {
            let res = await getSavePlantRegTipsMsg({});
            if (res.data.code == 451) {
                this.$confirm(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    if (this.activeName == 1) {
                        this.$refs.Tab1.saveFn();
                    }
                    if (this.activeName == 2) {
                        this.$refs.Tab2.saveFn();
                    }
                    if (this.activeName == 3) {
                        this.$refs.Tab3.saveFn();
                    }
                }).catch(() => {

                });
            }
        },
        async delFn() {
            let api = null;
            let dataJson = {};
            if (this.activeName == 1 && Object.keys(this.$refs.Tab1.activeRow).length != 0) {
                api = getDelPlantRegTipsMsg;
                dataJson = { PltName: this.$refs.Tab1.activeRow.pltName };
            }
            if (this.activeName == 2 && Object.keys(this.$refs.Tab2.activeRow).length != 0) {
                api = getDelProcessTipsMsg;
                dataJson = { ProName: this.$refs.Tab2.activeRow.proName };
            }
            if (this.activeName == 3 && Object.keys(this.$refs.Tab3.activeRow).length != 0) {
                api = getDelDrwPlanTipsMsg;
                dataJson = { DrwPlanName: this.$refs.Tab3.activeRow.areaName };
            }
            if (!api) {
                return
            }
            let res = await api(dataJson);
            if (res.data.code == 451) {
                this.$confirm(res.data.msg, '', {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(async () => {
                    if (this.activeName == 1) {
                        this.$refs.Tab1.delFn();
                    }
                    if (this.activeName == 2) {
                        this.$refs.Tab2.delFn();
                    }
                    if (this.activeName == 3) {
                        this.$refs.Tab3.delFn();
                    }
                }).catch(() => {

                });
            }
        },
        addRowFn() {
            if (this.activeName == 1) {
                this.$refs.Tab1.addRowFn();
            }
            if (this.activeName == 2) {
                this.$refs.Tab2.addRowFn();
            }
            if (this.activeName == 3) {
                this.$refs.Tab3.addRowFn();
            }
        },

        reGetFn() {
            if (this.activeName == 1) {
                this.$refs.Tab1.initFn();
            }
            if (this.activeName == 2) {
                this.$refs.Tab2.initFn();
            }
            if (this.activeName == 3) {
                this.$refs.Tab3.initFn();
            }
        },
        // Tab1
        // 一括削除弹框显示与否
        showTab1DelFlgFn() {
            this.showTab1DelFlg = !this.showTab1DelFlg;
        },

        // Tab2
        getResponse(arr) {
            // this.$message.success("OK");
            console.log(arr);
        },
        // 获取装置
        async getPlantApi(pageIndex, pageSize) {
            let dataJson = {
                pltCode: 0,
                platName: "",
                pageIndex,
                pageSize,
            };
            let res = await getPlant(dataJson)
            this.plantOptions = [];
            if (res.data.code != 0) {
                return;
            }
            this.plantOptions = res.data.data;

            if (this.$store.state.pltCode) {
				this.valuePlant = this.$store.state.pltCode;
			} else {
				this.valuePlant = this.plantOptions[0].pltCode;
				this.$store.commit(
					"changePltCode",
					this.valuePlant
				);
			}  
            
        },
        //装置筛选
        PlantChange() {
            // 更新保存的装置code
            this.$store.commit("changePltCode", this.valuePlant);
            // 更新保存的装置name
            this.plantOptions.forEach((Item) => {
                if (Item.pltCode == this.valuePlant) {
                    let valuePlant = Item.pltName;
                    this.$store.commit("changePlantName", valuePlant);
                    this.$store.commit("changePrnCode", Item.prnCode);
                }
            });
            this.$refs.Tab2.initFn();
            // ReadingCompontens 阅览页  不是表格显示方式 获取处理系
            // if (this.activeName == "fourth" && this.selectViewValue != 2) {
            //     this.drwMgtData = [];
            //     this.getProcessorApi();
            //     return;
            // }
            // this.getMachineApi("", "", "", 1, 1000);
            // this.itemActive = null;
        },


        // 
        onEditClick() {
            let routeData = this.$router.resolve({
                path: "/pfdCAD",
                query: {
                    pdfFile: this.$refs.Tab5.sourceUrl,
                    // pltCode: this.processorData[this.processorIndex].pltCode,
                    proCode: 13,
                    AreaCode: this.$refs.Tab5.MapValue,
                    // proName: this.processorData[this.processorIndex].proName,
                    proPass: this.$refs.Tab5.originExt,
                },
            });
            window.open(routeData.href, "_blank");

        },

    },
    created() { },
    mounted() {

    },
    beforeDestroy() { },
    destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
    width: calc(100% - 192px);
    height: 100%;

    .container {
        width: 100%;
        height: calc(100% - 55px);

        .SecondaryMenu {
            width: calc(100% - 48px);
            margin-left: 24px;
            height: 55px;

            .nameOne {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                span {
                    margin-right: 15px;
                }
            }
        }

        .containerView {
            width: calc(100% - 48px);
            margin-left: 24px;
            height: calc(100% - 115px);
            border: 1px solid #e1e1e1;
        }

        .bottonBtn {
            width: calc(100% - 48px);
            margin-left: 24px;
            height: 55px;
            display: flex;
            align-items: center;
        }
    }
}

.ml12 {
    margin-left: 12px;
}

.bh-tab {
    width: 100%;

    ::v-deep .el-tabs__header {
        margin: 14px 24px 0 24px;
        width: calc(100% -48px);
    }

    ::v-deep .el-tabs__content {
        height: calc(100% - 55px);
    }

    ::v-deep #pane-first {
        height: 100%;
    }

    ::v-deep #pane-second {
        height: 100%;
    }

    ::v-deep #pane-third {
        height: 100%;
    }
}
</style>